<template>
    <div class="icons">
        <swiper>
            <swiper-slide v-for="(page,index) of pages" :key="index">
                <div class="icon"  v-for="(item,index) in page" :key="index">
                    <div class="img">
                        <img :src="item.imgUrl" />
                    </div>
                    <p>{{item.txt}}</p>
                </div>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        name:'Homeicons',
        props:['iconList'],
        data(){
            return{
                // swiperOption:{
                //     pagination: {
                //         el: '.swiper-pagination'
                //     }
                // },
                // iconList:[
                //     {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                //         txt:'景点门票'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
                //         txt:'必游榜单'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
                //         txt:'游乐场'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png',
                //         txt:'夏日玩水'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
                //         txt:'动植物园'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
                //         txt:'一日游'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/dd/cce1231836f10a02.png',
                //         txt:'周边游'
                //     },
                //     {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png',
                //         txt:'自然风光'
                //     },
                //     {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
                //         txt:'演出'
                //     },
                //     {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/b6/37560ece9c62b502.png',
                //         txt:'城市观光'
                //     },
                //     {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
                //         txt:'名胜古迹'
                //     },
                //     {
                //         imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/dd/cce1231836f10a02.png',
                //         txt:'周边游'
                //     }
                // ]
            }
        },
        computed:{
            pages () {
                const pages = []
                this.iconList.forEach((item, index) => {
                    const page = Math.floor(index / 8)
                    if (!pages[page]) {
                    pages[page] = []
                    }
                    pages[page].push(item)
                })
                return pages
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import '~style/varibles.styl';
    @import '~style/mixins.styl';
   
    .icons >>> .swiper-container
        overflow    hidden
        height  0
        margin-top  0.1rem
        padding-bottom  50%
    .icons .icon
        width   25%
        float   left
        padding-bottom  25%
        text-align  center
        height  0
        position    relative
        .img
            position    absolute
            left    0
            top 0
            bottom  0.5rem
            right  0
            img
                position absolute
                left 0
                right    0
                bottom   0
                top  0
                margin   auto
                max-width    90%
                max-height   90%
        p
            font-size   0.3rem
            color   #000
            position    absolute
            left    0
            right   0
            bottom  0
            ellipsis()
            padding 0 5px
            box-sizing  border-box
            height  0.5rem
            line-height 0.5rem
            text-align  center
</style>